<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const title = ref("ADong匹配")
//底部导航栏高亮显示
let active = computed(() => {
    return route.path
})

//点击搜索
const onClickRight = () => {
    router.push('/search')
}

//根据路由切换标题
router.beforeEach((to, from) => {
    // @ts-ignore
    if (to.meta.title) {
        title.value = to.meta.title as string
    } else {
        title.value = to.query.userName as string
    }
})

//点击返回键
const onClickLeft = () => {
    router.back();
}

</script>
<template>
    <!-- 头部 -->
    <div v-if="title != '登录' && title != '注册' && title != '聊天'">
        <van-nav-bar :title="title" left-text="返回" left-arrow @click-right="onClickRight" @click-left="onClickLeft"
            >
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-notice-bar left-icon="volume-o" color="#1989fa" background="#ecf9ff"
            text="开黑上号！遇到任何问题，及时联系作者。欢迎大家提出反馈和建议! 欢迎道友与我合作！ 此致！ 敬礼！" />
    </div>
    <!-- 主要内容 -->
    <div id="cotent" style="padding-bottom: 50px">
        <router-view></router-view>
    </div>

    <!-- 底部 -->
    <van-tabbar v-model="active" v-if="title != '登录' && title != '注册' && title != '聊天'">
        <van-tabbar-item icon="wap-home" name="/" replace to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="friends" name="/friend" replace to="/friend">好友</van-tabbar-item>
        <van-tabbar-item icon="search" name="/team" replace to="/team">队伍</van-tabbar-item>
        <van-tabbar-item icon="manager" name="/user" replace to="/user">个人中心</van-tabbar-item>
    </van-tabbar>

</template>

<style scoped lang='scss'></style>